<template>
	<view class="box">
		<view class="wexin">
			<view class="tui-textarea-box">
				<textarea class="tui-textarea" v-model.trim="title" name="desc" placeholder="请输入标题" maxlength="500" placeholder-class="tui-phcolor-color"/>
			</view>
		</view>
		
		
		<view class="main">
			<text>上传任务截图</text>
			<image :src="file" mode="" @tap="chooseImage"></image>
			<!-- <view class="tui-upload-box">
			  <view class="tui-upload-item">
			    <image :src="files" class='tui-upload-img' @tap="previewImage" mode="aspectFill"></image>
			   
			  </view>
			  <view class="tui-upload-item tui-upload-add" v-if="files == ''" hover-class="tui-opcity" :hover-stay-time="150" @tap="chooseImage">
			    <tui-icon name="plus"></tui-icon>
			  </view>
			</view> -->
		</view>
		
		<view class="btn">
			<button @click="upload" >上传任务</button>
		</view>
		
	</view>
</template>
<script>

	export default {

		data() {
			return {
				title:"",
				taskType:"",
				file:"../../static/img/me/mission_upload_pictures.png",
				files:{}
			}
		},
		
		onLoad(options) {
			this.taskType = options.taskType;
		},
		
		methods: {
			chooseImage: function (e) {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], 			// 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], 				// 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						that.file = res.tempFilePaths[0]
						that.files = res.tempFiles[0]
						
					}
				})
			},
			upload(){
				let that = this;
				if(that.title == ""){
					that.tui.toast("标题不能为空")
				}else if(that.files == ""){
					that.tui.toast("图片不能为空")
				}else{
					uni.uploadFile({
						url: that.tui.interfaceUrl() + '/app/tasks/add',
						filePath: that.file, 
						name: 'file',
						header: {
							'qianyantoken': uni.getStorageSync('token')
						},
						formData: {
							file: that.files,
							taskType:that.taskType,
							taskTitle:that.title,
						},
						success: (res) => {
							console.log(res);
							if(res.statusCode == 200){
								// uni.navigateTo({
								// 	url: `/pages/user/sharingFriends?taskType=${this.taskType}`
								// })
								// uni.navigateBack({
									
								// })
								uni.redirectTo({
									url:`/pages/user/sharingFriends?taskType=${this.taskType}`
								})
							}
						}
					});
				}
				
				
				
			}
		}
	}
</script>
<style lang='scss'>
	@import '../../static/css/thorui.css';
	page{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.box{
		height: 100%;
		position: relative;
		padding-top: 10px;
		
		.wexin{
			width: 90%;
			margin: 0 auto;
			color: #ccc;
			font-size: 16px;
			background:rgba(250,250,250,1);
			border-radius:10px;
		}
		
		.main{
			width: 90%;
			margin: 0 auto;
			margin-top: 10px;
			
			
			text{
				color: #333333;
				font-size: 32upx;
				font-weight: bold;
			}
			image{
				display: block;
				width: 100px;
				height: 100px;
				margin-top: 10px;
			}
		}
		
		
	}	
	
	/* 按钮 */
	.btn {
		width: 90%;
		margin: 10px auto;
		position: absolute;
		bottom: 0;
		right: 5%;
	}
	
	.btn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #D14798;
		opacity: 0.8;
	}
	
	button:after {
		border: 2rpx solid #f2f2f2;
	}
</style>
